<template>
	<view>
		<view class="caozuo">
			<view>
				<checkbox-group class="flex align-center" @change="changeAll">
					<checkbox :checked="checked" :class="checked == true?'checked':''" class="round sx-check"></checkbox>
					<text style="font-size: 110%; margin-left: 10upx;">全选</text>
				</checkbox-group>
			</view>
			<view>
				<view @tap = "deleteAll" class="cu-btn sm round"><text class="cuIcon-delete"></text>删除</view>
			</view>
		</view>
		<view class="cart-content">
			<view v-for="(p,i) in lists" :key="i" class="cart-item bg-white">
				<view class="flex align-center">
					<checkbox-group>
						<checkbox @tap="changeChecked(i)" :checked="p.checked" :class="p.checked == true?'checked':''" class="round sx-check"></checkbox>
					</checkbox-group>
					<image :src="p.img"></image>
				</view>
				<view class="cart-ycontent" style="width: 450upx;">
					<view class="cart-title">{{p.title}}</view>
					<view>
						<view style="line-height: 60rpx;" class="text-gray">颜色：{{p.type}}</view>
						<view class="flex justify-between">
							<view style="font-size: 118%;" class="text-red text-bold">￥{{p.price}}</view>
							<uni-number-box @change="changejishu" v-model="p.num" style="margin-right: 40upx;" :min="0" :max="999"></uni-number-box>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="heji flex justify-between align-center">
			<view style="font-size: 110%;">合计<text class="text-orange">￥{{sum}}</text><text class="text-gray" style="font-size: 20rpx; margin-left: 10rpx;">元</text></view>
			<view>
				<view class="cu-btn bg-gradual-red round">去结算</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				checked:true,
				lists:[]
			}
		},
		onLoad(){
			this.getdata()
		},
		computed:{
			sum(){
				var he = 0;
				this.lists.forEach(p=>{
					if(p.checked == true){
						he+=p.num*p.price;
					}
				});
				return he.toFixed(2);
			}
		},
		methods: {
			deleteAll(){
				this.lists = this.lists.filter(p=>{
					return !p.checked;
				})
			},
			changeChecked(index){
				this.lists[index].checked = this.lists[index].checked?false:true;
				var selected = this.lists.filter(p=>{return !p.selected});
				selected.length == 0?this.checked = true:this.checked = false;
			},
			changejishu(val){
				val = parseInt(val);
				if(val == 0){
					var thisdata = this.lists.find(p=>{
						return p.num == 0;
					})
					console.log(thisdata)
					var its = this;
					uni.showModal({
						confirmText:"是的",
						content:"您确定要将"+thisdata.title+"移出购物车吗？",
						// content:"您确定要将其移出购物车吗？",
						title:"提示",
						success(res){
							if(res.confirm){
								its.lists = its.lists.filter(p=>{
									return p.id!=thisdata.id;
								})
							}
						}
					})
				}
			},
			changeAll(e){
					this.lists.forEach(p=>{
						p.checked =!this.checked;
					});
				this.checked?this.checked = false:this.checked = true;
			},
			getdata(){
				var data = [{
					id:1,
					img:"../../static/PhoneImg/iphone(4).jpeg",
					title:"苹果 iphone12 128G",
					type:"祖母绿",
					price:4999.90,
					num:1,
					checked:true
				},
				{
					id:2,
					img:"../../static/PhoneImg/iphone(2).jpeg",
					title:"苹果 iphoneXS MAX 256G",
					type:"高贵黑",
					price:5200.00,
					num:1,
					checked:true
				},
				{
					id:3,
					img:"../../static/PhoneImg/iphone(3).jpeg",
					title:"苹果 iphone12 512G",
					type:"远峰蓝",
					price:5999.90,
					num:1,
					checked:true
				}];
				this.lists = data;
			}
		}
	}
</script>

<style>
	page{
		background-color: #f8f6f9;
	}
.sx-check{
	transform: scale(0.7);
}
.cart-ycontent{
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding-top: 8upx;
	padding-bottom: 8upx;
}	
.cart-title{
	font-size: 110%;
	font-weight: bold;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.caozuo{
	position: fixed;
	top: 0upx;
	background-color: white;
	display: flex;
	justify-content: space-between;
	height: 80upx;
	align-items: center;
	width: 750upx;
	padding-left: 40upx;
	padding-right: 40upx;
}
.cart-content{
	margin-top: 85upx;
	margin-bottom: 200upx;
	/* top: 50upx; */
}
.cart-item{
	display: flex;
	justify-content: space-between;
	padding: 20upx;
	margin-top: 20upx;
}
.cart-item image{
	width: 200upx;
	height: 200upx;
}
.heji{
	position: fixed;
	bottom: 3upx;
	width: 750upx;
	height: 100upx;
	background-color: white;
	padding-left: 30upx;
	padding-right: 30upx;
}
</style>
